<template>
  <div style="padding: 10px;
        " id="home">
    <!--功能区域-->
    <div style="margin: 10px 0;overflow: hidden " size="small">
      <el-button type="success" round @click="add">新增</el-button>

      <el-button type="primary" round @click="exportUser">导出</el-button>
    </div>

    <div style="margin: 10px 0" align="center">
      <el-input v-model="search" placeholder="请输入关键字" @keyup.enter.native="load"   style="width: 20%"
                clearable="" require="require"></el-input>
      <el-button type="primary" style="margin: 2px " @click="load">查询</el-button>
    </div>

    <!--表格-->
    <el-table
      :data="tableData"
      border
      stripe=""
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        sortable=""
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
      >
      </el-table-column>
      <el-table-column
        prop="nick"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="address"
        label="住址">
      </el-table-column>
      <el-table-column width="180px"

                       prop="regtime"
                       label="注册时间">
      </el-table-column>

      <el-table-column
        prop="role"
        label="角色">
        <template slot-scope="scope">
          <el-tag :type="scope.row.role === 1?'success':''">
            {{scope.row.role === 1? '管理员': '普通用户'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <el-avatar :size="40 ">
            <img :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"/>
          </el-avatar>

        </template>
      </el-table-column>

      <el-table-column label="操作" width="130">
        <template slot-scope="scope">


          <el-button type="primary" title="编辑" @click="  handleEdit(scope.row)"
                     icon="el-icon-edit" circle v-if="forms1.username!=form.username"></el-button>

          <!--删除-->
          <el-button @click="handleDelete(scope.row.id)" title="删除"
                     slot="reference" type="danger" icon="el-icon-delete" circle
                     style="margin-left: 10px"></el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--添加的弹窗-->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="30%">

      <el-form label-width="120px" :model="form" :rules="rules" ref="form">
        <el-form-item label="用户名" style="font-weight: bold" prop="username">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="昵称" style="font-weight: bold" prop="nick">
          <el-input v-model="form.nick" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄" style="font-weight: bold" prop="age">
          <el-input v-model="form.age" style="width: 80%"></el-input>
        </el-form-item>

        <el-form-item label="性别" style="font-weight: bold" prop="sex">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
          <el-radio v-model="form.sex" label="未知">未知</el-radio>

        </el-form-item>
        <el-form-item label="地址" style="font-weight: bold" prop="address">
          <el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="角色" style="font-weight: bold" prop="role">
          <el-select v-model="form.role" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" style="font-weight: bold">
          <el-upload ref="upload1" action="http://localhost:8083/files/upload" :on-success="filesUploadSuccess1">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>


    <!--更新的弹窗-->
    <el-dialog
      title="更新信息"
      :visible.sync="updateDialogVisible"
      width="30%">

      <el-form label-width="120px" :model="forms">
        <el-form-item label="用户名" style="font-weight: bold">
          <el-input v-model="forms.username" style="width: 80%" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="昵称" style="font-weight: bold">
          <el-input v-model="forms.nick" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="年龄" style="font-weight: bold">
          <el-input v-model="forms.age" style="width: 80%"></el-input>
        </el-form-item>

        <el-form-item label="性别" style="font-weight: bold">
          <el-radio v-model="forms.sex" label="男">男</el-radio>
          <el-radio v-model="forms.sex" label="女">女</el-radio>
          <el-radio v-model="forms.sex" label="未知">未知</el-radio>

        </el-form-item>
        <el-form-item label="地址" style="font-weight: bold">
          <el-input type="textarea" v-model="forms.address" style="width: 80%"></el-input>
        </el-form-item>

        <el-form-item label="状态" style="font-weight: bold">

          <el-tag :type="forms.status === 1?'success':''">
            {{forms.status === 1? '审核通过': '驳回申请'}}
          </el-tag>
          <el-select v-model="forms.newStatus" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" style="font-weight: bold">

          <el-tag :type="forms.role === 1?'success':''">
            {{forms.role === 1? '管理员': '普通用户'}}
          </el-tag>
          <el-select v-model="forms.newRole" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            ref="upload"
            action="http://127.0.0.1:8083/files/upload"
            :on-success="filesUploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="updateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
    </el-dialog>


    <!--分页-->
    <div style="margin: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import request from '../utils/request'
  import "../assets/index.css";
  export default {
    data() {
      return {
        roles: [],
        options: [{
          value: '1',
          label: '管理员'
        }, {
          value: '2',
          label: '普通用户'
        }],
        options1: [{
          value: '1',
          label: '审核通过'
        }, {
          value: '2',
          label: '驳回申请'
        }],

        form: {},
        forms: {
          newRole: '',
          newStatus: ''
        },
        //默认弹窗关闭
        addDialogVisible: false,
        updateDialogVisible: false,
        bookVis: false,
        search: '',
        //当前页
        currentPage: 1,
        status: 1,
        pageSize: 5,
        //总共的数量
        total: 0,
        tableData: [],
        forms1:{},

        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },

          ],
          nick: [
            { required: true, message: '请输入昵称', trigger: 'blur' },

          ],
          age: [
            { required: true, message: '请输入年龄', trigger: 'blur' },

          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'blur' },

          ],
          address: [
            { required: true, message: '请输入住址', trigger: 'blur' },

          ],
          role: [
            { required: true, message: '请选择角色', trigger: 'blur' },

          ],


        }
      }
    },
    created() {
      this.load()
      let str = sessionStorage.getItem('user')
      this.forms1 = JSON.parse(str)
      //角色判断
      if (this.forms.role === 1) {
        this.forms.newRole = '管理员'
      } else {
        this.forms.newRole = '普通用户'
      }
    },

    methods: {

      //查询  带有参数需要用params
      load() {

        request.get('/user/selectPage', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
            status: this.status
          }

        }).then(res => {

          this.tableData = res.data.records
          this.total = res.data.total
        })

        request.get('/user/all').then(res => {
          this.roles = res.data
        })
      },

      //保存
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
        request.post('/user/addUser', this.form).then(res => {

          if (res.code === 20000) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.addDialogVisible = false
            this.load()
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
            this.addDialogVisible = false
            this.load()
          }

        })  }})
      },

      //更新
      update() {
        if (this.forms['newRole']) {
          this.forms.role = parseInt(this.forms['newRole'])
        }

        if (this.forms['newStatus']) {
          this.forms.status = parseInt(this.forms['newStatus'])
        }
        request.put('/user/updateUser', this.forms).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.load()
            this.updateDialogVisible = false
          }
          else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }

        })

      },

      //新增
      add() {
        this.addDialogVisible = true
        this.form = {}
        this.$nextTick(() => {
          this.$refs['upload1'].clearFiles()
        })  //清除历史文件历史列表
      },

      //编辑
      handleEdit(row) {
        //携带数据
        this.forms = JSON.parse(JSON.stringify(row))
        this.updateDialogVisible = true
        this.$nextTick(() => {
          this.$refs['upload'].clearFiles()
        })  //清除历史文件历史列表

      },

      //删除
      handleDelete(id) {
        this.$confirm('你确定要删除,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          request.delete('/user/deleteUser/' + id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.load()
          })
        }).catch(() => {
          this.$message({
            message: '已取消删除',
            type: 'success'
          })
        })
      },

      exportUser() {
        location.href = "http://localhost" + ":8083/user/export";
      },


      //文件上传  更新文件
      filesUploadSuccess(res) {
        console.log(res.data)
        this.forms.avatar = res.data
      },
      //添加文件
      filesUploadSuccess1(res) {
        this.form.avatar = res.data
      },

     /* handleUploadSuccess(res) {
        if (res.code === 20000) {
          this.$message.success('导入成功')
          this.load()
        }
      },*/

      //页码 每页的个数
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.load()
      },
      //改变当前页
      handleCurrentChange(pageNum) {
        this.currentPage = pageNum
        this.load()
      }
    }

  }
</script>
<style>

</style>
